<template>
  <div class="app-container">
    <!-- 查询和其他操作 -->
    <div class="filter-container">
      <el-form :model="listQuery" size="small" :inline="true">
        <el-col :span="2" :offset="22">
          <el-form-item>
            <el-button
              class="filter-item"
              type="primary"
              icon="el-icon-plus"
              @click="exportListOrderApi"
              >导出订单</el-button
            >
          </el-form-item>
        </el-col>
      </el-form>
    </div>
    <!-- 查询结果 -->
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="正在查询中。。。"
      border
      fit
      highlight-current-row
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column
        align="center"
        width="150px"
        label="商铺名称"
        prop="brandName"
        sortable
      />

      <el-table-column align="center" label="订单编号" prop="orderSn">
      </el-table-column>

      <el-table-column align="center" label="服务名称" prop="goodsName" />

      <el-table-column align="center" label="核销用户名" prop="consignee" />

      <el-table-column align="center" label="核销用户名电话" prop="mobile">
        <!-- <template slot-scope="scope">
          <el-tag>{{ genderDic[scope.row.gender] }}</el-tag>
        </template> -->
      </el-table-column>

      <el-table-column align="center" label="订单状态" prop="orderStatusText" />

      <el-table-column align="center" label="商品总费用" prop="goodsPrice">
        <template slot-scope="scope">
          <span>{{ scope.row.goodsPrice.toFixed(2) }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="优惠卷减免" prop="couponPrice" />

      <el-table-column
        align="center"
        label="提交订单时总费用"
        prop="orderPrice"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.orderPrice.toFixed(2) }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="微信付款编号" prop="payId" />

      <el-table-column align="center" label="微信付款时间" prop="payTime" />
    </el-table>

    <!-- <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getList"
    /> -->
  </div>
</template>

<script>
import { fetchList, userDetail, updateUser } from "@/api/user";
import { exportListOrder, findListOrder } from "@/api/order";
import Pagination from "@/components/Pagination"; // Secondary package based on el-pagination
import { saveAs } from "file-saver"; //导出文件插件

const defaultLevelOptions = [
  {
    label: "普通用户",
    value: 0,
  },
  {
    label: "VIP用户",
    value: 1,
  },
  {
    label: "高级VIP用户",
    value: 2,
  },
];

export default {
  name: "User",
  components: { Pagination },
  data() {
    return {
      levelOptions: Object.assign({}, defaultLevelOptions),
      list: null,
      total: 0,
      listLoading: true,
      listtest: {
        brandName: "",
        orderSn: "",
        orderStatus: null,
        page: 1,
        limit: 20,
      },
      listQuery: {
        page: 1,
        limit: 20,
        level: undefined,
        inviter: undefined,
        mobile: undefined,
        userId: undefined,
        sort: "add_time",
        order: "desc",
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    async getList() {
      this.listLoading = true;
      const response = await findListOrder(this.listtest);
      this.list = response.data.list;
      this.total = response.data.total;
      this.listLoading = false;
    },
    handleFilter() {
      this.listQuery.page = 1;
      this.getList();
    },
    // 导出 excel
    async exportListOrderApi() {
      const res = await exportListOrder(); // 请求接口
      console.log(res);
      saveAs(res, "员工股信息.xlsx"); // 导出 excel
    },
  },
};
</script>
